<template>
	<view class="feedBack">
		<view class="box">
			<text>{{$t('idSafe.feedback.selectProblem')}}</text>
			<view class="content">
				<label>
					<view v-for="(x,y) in listQ" :key="y" class="list">
					<text>{{x}}</text><checkbox class="check round" @click="currt(x)" /> 
					</view>
				</label>
				<view class="list" @click="other">
					<text>{{$t('idSafe.feedback.other')}}</text> <text class="check">></text>
				</view>
			</view>
		</view>
		
		<view><view class="tel">{{$t('idSafe.feedback.contact')}}</view>
		<input type="text" value="" :placeholder="$t('idSafe.forgetDealP.inpTel')" />
		</view>
		
		<button type="default">{{$t('idSafe.feedback.submit')}}</button>
	</view>
</template>

<script>
	import feedBack from '../../components/feedBack/feedBack.vue' 
	export default {
		components:{
			feedBack
		},
		data() {
			return {
		
			}
		},
		computed:{
			listQ(){
				return[
					this.$t('idSafe.feedback.problem1'),
					this.$t('idSafe.feedback.problem2'),
					this.$t('idSafe.feedback.problem2'),
					this.$t('idSafe.feedback.problem2'),
				]
			}
			},
		methods: {
			currt(e){
				console.log(e);
			},
			other(){
				uni.navigateTo({
					url:'../feedBack-other/feedBack-other'
				})
			}
		}
	}
</script>
<style>
	page{
		background-color: #F3F3F3;
	}
</style>
<style>
.list{
	width: 100%;
	height: 100rpx;
	line-height: 100rpx;
	background-color: #FFFFFF;
	margin: 20rpx 0;
	font-weight: bold;
}
text{
	padding-left: 40rpx;
}
.check{
	float: right;
	padding-right: 40rpx;
	border-radius: 50%;
}
.tel{
	font-size: .8em;
	color: #666666;
	padding-left: 60rpx;
	margin: 60rpx 0 20rpx 0;
}
input{
	width: 80%;
	height: 100rpx;
	 padding-left: 60rpx;
	margin: auto;
	background-color: #FFFFFF;
	}
	button{
		width: 90%;
		margin: auto;
		position: absolute;
		bottom: 2vh;
		left: calc(50% - 45%);
		background-color: #0070f8;
		color: #FFFFFF;
		}
</style>

